<template>
  <el-container>
    <el-header>
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础信息" name="first"> </el-tab-pane>
      </el-tabs>
    </el-header>

    <el-main style="text-align: center; height: 100%">
      <div style="width: 80%; margin: auto">
        <div style="width: 100%;">
          <div class="textSty">
            <x style="color: red;">*</x>
            店铺名称
          </div>
          <div>
            <el-input
              type="text"
              placeholder="请输入你的店铺名称"
              v-model="form.shopName"
              show-word-limit
              style="width: 480px; margin-left: 1rem; "
            >
            </el-input>
          </div>
        </div>

        <!-- 店铺ID -->
        <div style="width: 100%">
          <div class="textSty">&nbsp;&nbsp;店铺ID</div>
          <div>
            <el-input
              type="text"
              placeholder="请导入店铺ID"
              v-model="form.shopID"
              readonly="readonly"
              show-word-limit
              style="width: 480px; margin-left: 1rem; "
            >
            </el-input>
          </div>
        </div>

      
        <!-- 联系地址 -->
        <div style="width: 100%">
          <div class="textSty">
            <x style="color: red;">*</x>
            联系方式
          </div>
          <!-- 省市区三级联动 -->
          <level />
        </div>

        <!-- 省市区后的具体地址 -->
        <div style="width: 100%">
          <el-input
            type="text"
            placeholder="请输入详细地址"
            v-model="form.detailedAddress"
            maxlength="30"
            show-word-limit
            style="width: 480px; margin-left: 1rem; "
          >
          </el-input>
        </div>

        <!-- 按钮 -->
        <div style="width: 100%">
            <el-button type="primary" @click="handleSave">保存</el-button>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Level from "./Level3";
export default {
  components: {
    Level,
  },
  mounted() {
  },
  data() {
    return {
      form: {
          shopName: '',
          shopID: '',
        detailedAddress: '',
        // 图片
        dialogImageUrl: '',
        dialogVisible: false,
      },
      activeName: "first",
      isOperation: false,
      // 表格数据源绑定
      tableData: [],
    };
  },

  methods: {
    // 照片墙
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 保存事件
    handleSave(){
        alert('保存事件')
    }
  },
};
</script>

<style scoped>
* {
  list-style: none;
}
.el-table-column {
  margin: 0px;
}

ul {
  list-style: none;
  margin: 1rem;
}
ul li {
  display: inline;
  margin-left: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.el-cascader {
  width: 180px;
}
.textSty {
  margin: 1rem;
  text-align: left;
  padding-left: 380px;
}
.el-button{
    margin:1rem;
}
</style>
